{% extends "admin/base.html" %}


{% block content_main %}
<table id="demo" lay-filter="test"></table>
{% endblock %}


{% block script %}
<script>
layui.use('table', function(){
  var table = layui.table;

  //第一个实例
  table.render({
    elem: '#demo'
    {#,height: 312#}
    ,url: '/admin/query_student' //数据接口
    ,page: true //开启分页
    ,toolbar: true
    ,cols: [[ //表头
      {field: 'username', title: '账号', width:100, fixed: 'left'}
      ,{field: 'password', title: '密码', width:100}
      ,{field: 'name', title: '姓名', width:100}
      ,{field: 'phone', title: '电话', width:120}
      ,{field: 'create_time', title: '创建时间', width:160}
      ,{field: 'update_time', title: '更新时间', width: 160}
      ,{field: 'is_delete', title: '是否已经注销', width: 120}
      ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
    ]]
  });

  //工具条事件
    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

      if(layEvent === 'detail'){ //查看
        //do somehing
          $.post(
                "/api/admin/recovery_student",
                {
                    id_user: data.id
                },
                function (data,status) {
                    if(data.code == 0){
                        window.location.reload();
                    }else {
                        layer.alert(data.msg, {icon: 5});
                    }
                }
            );
      } else if(layEvent === 'del'){ //删除
        layer.confirm('真的注销么？', function(index){
          {#obj.del(); //删除对应行（tr）的DOM结构，并更新缓存#}
            $.post(
                "/api/admin/delete_student",
                {
                    id_user: data.id
                },
                function (data,status) {
                    if(data.code == 0){
                        window.location.reload();
                    }else {
                        layer.alert(data.msg, {icon: 5});
                    }
                }
            );
          layer.close(index);
          //向服务端发送删除指令
        });
      } else if(layEvent === 'edit'){ //编辑
        //do something

        //同步更新缓存对应的值
        obj.update({
          username: '123'
          ,title: 'xxx'
        });
      } else if(layEvent === 'LAYTABLE_TIPS'){
        layer.alert('Hi，头部工具栏扩展的右侧图标。');
      }
    });

});
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">恢复</a>
{#  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>#}
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">注销</a>
</script>
{% endblock %}
